<template>
  <view w-full box-border pa-20rpx>
    <city ref="cityPicker" head-title="区域选择" picker-size="4" @funcValue="confirmCity" />
    <nut-popup v-model:visible="relation_show" position="bottom" safe-area-inset-bottom>
      <nut-picker
        :columns="member_relation"
        title="成员关系选择"
        @confirm="onConfirmRelation"
        @cancel="relation_show = false"></nut-picker>
    </nut-popup>
    <nut-popup v-model:visible="date_show" position="bottom" safe-area-inset-bottom>
      <nut-date-picker
        three-dimensional
        is-show-chinese
        @confirm="onConfirmDate"
        @cancel="date_show = false"></nut-date-picker>
    </nut-popup>
    <view bg="#fff" rounded-20rpx mb-20rpx>
      <nut-form ref="formRef" :model-value="form" :rules="rules">
        <nut-form-item prop="memberRelation" label="成员关系">
          <nut-input
            v-model="relation[form.memberRelation]"
            readonly
            class="nut-input-text"
            placeholder="请选择成员关系"
            type="text"
            @click="relation_show = true" />
        </nut-form-item>
        <nut-form-item prop="nickName" label="真实姓名">
          <nut-input v-model="form.nickName" placeholder="请输入真实姓名" type="text" />
        </nut-form-item>
        <nut-form-item prop="birthday" label="出生日期">
          <nut-input
            v-model="form.birthday"
            readonly
            class="nut-input-text"
            placeholder="请选择出生日期"
            type="text"
            @click="date_show = true" />
        </nut-form-item>
        <nut-form-item prop="region" label="所在区域">
          <nut-input
            v-model="form.region"
            readonly
            class="nut-input-text"
            placeholder="请选择所在区域"
            type="text"
            @click="picker" />
        </nut-form-item>
        <nut-form-item prop="detailAddress" label="详细地址">
          <nut-input v-model="form.detailAddress" class="nut-input-text" placeholder="请输入详细地址" type="text" />
        </nut-form-item>
        <nut-form-item v-if="form.mobileSameAccount === 0" prop="mobile" label="联系电话">
          <nut-input v-model="form.mobile" class="nut-input-text" placeholder="请输入联系电话" type="text" />
        </nut-form-item>
      </nut-form>
    </view>
    <view bg="#fff" rounded-20rpx mb-20rpx>
      <nut-cell title="联系电话与主账号一致">
        <template #link>
          <nut-switch
            v-model="form.mobileSameAccount"
            :active-value="1"
            :inactive-value="0"
            @change="
              () => {
                form.mobile = ''
              }
            "></nut-switch>
        </template>
      </nut-cell>
    </view>
  </view>
  <view position-fixed bottom-70rpx w-full z-999 px-40rpx box-border>
    <view
      w-670rpx
      h-100rpx
      rounded-50rpx
      bg="#FCC300"
      flex
      justify-center
      items-center
      font-500
      text="#000"
      text-32rpx
      mb-30rpx
      @click="addMember">
      <!-- {{ form.id ? '立即修改' : '立即添加' }} -->
        提交
    </view>
    <!-- <view
      w-670rpx
      h-100rpx
      rounded-50rpx
      bg="#D9D9D9"
      flex
      justify-center
      items-center
      font-500
      text="#7D7D7D"
      text-32rpx
      @click="goBack">
      取消
    </view> -->
  </view>
</template>

<script setup lang="ts">
import { myFamilyMemberDetail, addFamilyMember, updateFamilyMember } from '@/api/familyMember'
import type { FormInst } from 'nutui-uniapp'
import city from '@/components/m-city/m-city.vue'
import { onLoad } from '@dcloudio/uni-app'
const formRef = ref<FormInst | null>(null)
const relation_show = ref(false)
const date_show = ref(false)
interface Form {
  id?: string
  nickName: string
  memberRelation: number
  mobile: string
  birthday: string
  region: string[]
  regionId: string[]
  detailAddress: string
  mobileSameAccount: number
  bindSchool: string[]
  bindUnit: string[]
}
const form = ref<Form>({
  nickName: '',
  memberRelation: 1,
  mobile: '',
  birthday: '',
  region: [],
  regionId: [],
  detailAddress: '',
  mobileSameAccount: 0,
  bindSchool: [],
  bindUnit: []
})
const rules = ref({
  nickName: [{ required: true, message: '请输入真实姓名', trigger: 'blur' }],
  memberRelation: [{ required: true, message: '请选择成员关系', trigger: 'blur' }],
  mobile: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
  birthday: [{ required: true, message: '请选择出生日期', trigger: 'blur' }],
  region: [{ required: true, message: '请选择所在区域', trigger: 'blur' }],
  detailAddress: [{ required: true, message: '请输入详细地址', trigger: 'blur' }]
})
const member_relation = ref([
  { text: '父子', value: 1 },
  { text: '父女', value: 2 },
  { text: '母子', value: 3 },
  { text: '母女', value: 4 },
  { text: '父母', value: 5 },
  { text: '配偶', value: 6 },
  { text: '朋友', value: 7 }
])
const relation = ref<any>({
  1: '父子',
  2: '父女',
  3: '母子',
  4: '母女',
  5: '父母',
  6: '配偶',
  7: '朋友'
})
const cityPicker = ref<any>(null)
function picker() {
  cityPicker.value.show()
}
function confirmCity(list: Array<any>) {
  const addressList: Array<string> = []
  const ids: Array<string> = []
  list.forEach((item) => {
    addressList.push(item.localName)
    ids.push(item.id)
  })

  form.value.region = addressList
  form.value.regionId = ids
}
function onConfirmRelation(val: any) {
  form.value.memberRelation = val.selectedValue[0]
  relation_show.value = false
}
function onConfirmDate(val: any) {
  console.log('selectedValue', val.selectedValue)
  form.value.birthday = val.selectedValue.join('-')
  date_show.value = false
}

function addMember() {
  formRef.value?.validate().then(({ valid, errors }) => {
    if (valid) {
      console.log(form.value)
      uni.showLoading({ title: '正在提交...', mask: true })
      const submit: any = { ...form.value }
      if (Array.isArray(submit.regionId)) submit.regionId = submit.regionId.join(',')
      if (Array.isArray(submit.region)) submit.region = submit.region.join(',')
      if (form.value.id) {
        updateFamilyMember(submit).then((res: any) => {
          uni.showToast({
            title: '修改成功',
            icon: 'none',
            duration: 3000
          })
          goBack()
        })
      } else {
        addFamilyMember(submit).then((res: any) => {
          uni.showToast({
            title: '添加成功',
            icon: 'none',
            duration: 3000
          })
          goBack()
        })
      }
    }
  })
}

function goBack() {
  uni.navigateBack({
    delta: 1 // 回退前 delta(默认为1) 页面数
  })
  uni.hideLoading
}
onMounted(() => {})
onLoad((options: any) => {
  if (options.id) {
    myFamilyMemberDetail(options.id).then((res: any) => {
      form.value = res.data.result
    })
    uni.setNavigationBarTitle({
      title: '编辑成员'
    })
  }
})
</script>
<style>
page {
}
</style>
<style scoped lang="scss"></style>
